<template>
	<view class="backgroundbox">

		<u-sticky>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#FED187"
				inactive-color="#fff" bg-color="#262626"></u-tabs>

		</u-sticky>

		<template v-if="item.length !== 0">
			<view class="" v-show="current == 1">
				<view class="itembox" v-for="i in item" :key="i.id" @click="gotourl(i)">
					<view class="timetext">
						赠送时间：{{ i.create_time }}
					</view>
					<view class="gsbox">
						<view class="nrbox" v-for="j in i.prize_list" :key="j.order_id">
							<view class="nrimgbox">
								<image :src="j.prize_icon" mode="aspectFit"></image>
							</view>
							<view class="nrboxtitle">
								{{ j.prize_name }}
							</view>
							<view class="rnbottmtext">
								<view class="rnjg">
									￥{{ j.price }}
								</view>
								<view class="rnbs">
									x{{ j.num }}
								</view>
							</view>
						</view>
					</view>
					<view class="hzpeople">
						赠送人：<image :src="i.avatar" class="tximg"></image><text class="text_name">{{ i.nickname }}</text>
					</view>
				</view>
			</view>
			<view class="" v-show="current == 0">
				<view class="itembox" v-for="i in item" :key="i.id" @click="gotourl(i)">
					<view class="timetext">
						赠送时间：{{ i.create_time }}
					</view>
					<view class="gsbox">
						<view class="nrbox" v-for="j in i.prize_list" :key="j.order_id">
							<!-- :style="{backgroundImage:'url(' + jieguobox.shuju.msg_img + ')'}" -->
							<view class="nrimgbox">
								<image :src="j.prize_icon" mode="aspectFit"></image>
							</view>
							<view class="nrboxtitle">
								{{ j.prize_name }}
							</view>
							<view class="rnbottmtext">
								<view class="rnjg">
									￥{{ j.price }}
								</view>
								<view class="rnbs">
									x{{ j.num }}
								</view>
							</view>
						</view>
					</view>
					<view class="hzpeople">
						<view class="">
							获赠人：
						</view>
						<image :src="i.avatar" class="tximg"></image>
						<view style="color: #fff;">{{ i.nickname }}</view>
					</view>
				</view>
			</view>
		</template>


		<template v-else>
			<!-- <view class="no_recored">暂无记录</view> -->
			<u-empty text="暂无记录" mode="history" margin-top="400"></u-empty>
		</template>

	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [{
				name: '我的赠送'
			}, {
				name: '我的获赠'
			}],
			current: 0,
			item: [],
			page: 1,
			totalPage: 0
		}
	},
	onShow() {
		this.getlist()
	},
	onReachBottom() {
		this.page++
		if (this.page <= this.totalPage) {
			this.getlist()
		} else {
			uni.showToast({
				title: '已无数据',
				icon: 'none'
			});
		}

	},
	methods: {
		change(index) {
			this.current = index;
			this.getlist()
		},
		getlist() {
			this.item = []
			let data = {
				type: this.current + 1,
				page: this.page
			}
			// ////console.log(data)
			uni.showLoading({
				title: "加载中..."
			})
			this.$Request.get(this.$api.zengli.zengsong, data).then(res => {
				uni.hideLoading()
				if (res.code === 0) {
					if (res.data.page !== 1) {
						this.item = [...this.item, ...res.data.list]
					} else {
						this.item = res.data.list
					}
					this.totalPage = res.totalPage
				}
			});
		},
		gotourl(e) {
			////console.log(e)
			uni.navigateTo({
				url: `/userPage/user/zenglixiangqing?list=${JSON.stringify(e)}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.backgroundbox {
	background: #262626;
	padding-bottom: 44rpx;
	min-height: 100vh;
}

.itembox {
	width: 95%;
	height: 475rpx;
	background: rgba(255, 231, 192, 0.1);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	border: 2rpx solid #FED187;
	border-radius: 10px;
	margin: 0 auto;
	// margin-top: 25rpx;
	padding: 31rpx;
}

.timetext {
	font-size: 24rpx;
	font-weight: 500;
	color: #fff;
}

.gsbox {
	padding: 30rpx 0;
	display: flex;
	overflow: hidden;
	overflow-x: auto;
}

.nrbox {
	width: 192rpx;
	height: 274rpx;
	background: rgba(255, 231, 192, 0.1);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	border: 1rpx solid #FED187;
	border-radius: 10px;
	margin-right: 35rpx;
}

.nrimgbox {
	width: 188rpx;
	height: 120rpx;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 26rpx auto 30rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.nrboxtitle {
	width: 181rpx;
	font-size: 20rpx;
	color: #fff;
	height: 25rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0 auto;
	// margin-top: 25rpx;
}

.rnbottmtext {
	width: 181rpx;
	display: flex;
	align-items: center;
	margin-top: 17rpx;
	color: white;
}

.rnjg {
	margin-left: 15rpx;
	color: #fff;
	font-size: 23rpx;
}

.rnbs {
	font-size: 20rpx;
	justify-content: flex-end;
	margin-left: auto;
	// margin-left: 50rpx;
}

.hzpeople {
	// height: 124rpx;
	line-height: 62rpx;
	display: flex;
	align-items: center;
	font-size: 24rpx;
	font-weight: 500;
	color: #fff;

	.text_name {
		color: #fff;
		width: 460rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
}

.tximg {
	width: 62rpx;
	height: 62rpx;
	margin-right: 12rpx;
	border-radius: 50%;
}

.no_recored {
	position: fixed;
	top: 50%;
	left: 40%;
	font-size: 30rpx;
	font-weight: bold;
}
</style>
